<!--
 * @Descripttion: 
 * @version: 
 * @Author: Xugang
 * @Date: 2022-04-22 10:53:50
 * @LastEditors: Xugang
 * @LastEditTime: 2022-04-22 15:15:35
-->
<template>
  <div>
    <el-table
      row-key="id"
      :expand-row-keys="expandKeys"
      :data="list"
      style="width: 100%"
      max-height="1000px"
    >
      <el-table-column type="expand" width="1">
        <template slot-scope="scoped">
          <div style="background: red">
            <recursion-components :list="scoped.row.children" />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="姓名"
      ></el-table-column>
      <el-table-column align="center" prop="sex" label="性别">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scoped">
          <el-button size="mini" type="primary" @click="add(scoped)"
            >添加</el-button
          >
          <el-button size="mini" type="primary" @click="expand(scoped)">{{
            expandName(scoped)
          }}</el-button>
          <el-button size="mini" type="danger" @click="remove(scoped)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "recursionComponents",
  props: ["list"],
  data() {
    return {
      expandKeys: [],
    };
  },
  computed: {},

  created() {
    if (!this.$root.path) {
      this.$root.path = [];
    }
  },
  destroyed() {},

  methods: {
    expandName(data) {
      if (this.expandKeys[0] === data.row.id) {
        return "收起";
      } else {
        return "展开";
      }
    },
    add(data) {
      const path = this.findCurrent(this.$root.expandData, data.row.id);
      this.$root.path = [];
      const cur = path.reduce((prev, cur, i) => {
        if (i === path.length - 1) {
          return prev[cur];
        }
        return prev[cur].children;
      }, this.$root.expandData);
      cur.children.push({
        id: Math.random(),
        name: "未知",
        sex: "未知",
        children: [],
      });
    },
    remove(data) {
      const path = this.findCurrent(this.$root.expandData, data.row.id);
      path.pop();
      this.$root.path = [];
      const cur = path.reduce((prev, cur, i) => {
        if (i === path.length - 1) {
          return prev[cur];
        }
        return prev[cur].children;
      }, this.$root.expandData);
      const index = cur.children.findIndex((x) => x.id === data.row.id);
      cur.children.splice(index, 1);
    },
    expand(data) {
      //   console.log("展开★★★★★ 11:12:49 —— data", data);
      if (this.expandKeys[0] === data.row.id) {
        this.expandKeys = [];
      } else {
        this.expandKeys = [data.row.id];
      }
    },
    // 查找 并操作 树
    findCurrent(list, id) {
      try {
        const getPath = (list) => {
          list.forEach((x, index) => {
            this.$root.path.push(index);
            if (x.id === id) {
              throw "find";
            }
            if (x.children) {
              getPath(x.children);
            }
            this.$root.path.pop();
          });
        };
        getPath(list);
      } catch (error) {
        return this.$root.path;
      }
    },
  },
};
</script>

<style scoped lang='less'>
/deep/.el-table__expand-icon {
  display: none !important;
}
/deep/.el-table th {
  background: #f1f3f4;
}
/deep/.el-table__expanded-cell[class*="cell"] {
  //   background-color: #8376f3;
  padding: 20px 40px;
}
/deep/.el-table__body-wrapper {
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
